// 导入字体文件
@use "../fonts/font";

// 定义公共样式的Mixin
@mixin head-styles($skew-direction, $margin-side, $after-position) {
  &::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    margin-top: var(--padding-size);
    content: "";
    background-color: var(--bg-fill-color);
    transform: skewX($skew-direction);
    #{$margin-side}: var(--padding-size);
  }

  &::after {
    position: absolute;
    z-index: -1;
    width: 100px;
    height: 100%;
    content: "";
    background-color: var(--bg-fill-color);
    #{$after-position}: 0;
  }
}

.dataScreen-container {
  --bg-fill-color: rgba(28, 58, 160, 1);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../images/bg.webp") center;
  background-size: cover;
}
.dataScreen-header {
  position: relative;
  height: 60px;
  background: url("../images/header-bg.webp") 50%;
  background-size: cover;
  // padding: 0 10px;
  --padding-size: 10px;

  .title {
    position: relative;
    top: -8px;
    // w="[50%]" text-center
    width: 50%;
    font-family: YouSheBiaoTiHei, Arial, sans-serif;
    font-size: 38px;
    color: #00eaff;
    text-align: center;
    letter-spacing: 8px;
  }

  .leftHead,
  .rightHead {
    position: relative;
    display: flex;
    flex: 1;
    height: 100%;
    padding-top: var(--padding-size);
  }

  // 应用Mixin
  .leftHead {
    @include head-styles(45deg, margin-right, left);
  }

  .rightHead {
    @include head-styles(-45deg, margin-left, right);
    .dateTime {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      width: 100%;
      padding-right: 10px;
      font-family: YouSheBiaoTiHei, Arial, sans-serif;
      font-size: 24px;
    }
  }
  .lines {
    position: absolute;
    top: -3px;
    width: 140px;
    height: 6px;
    background-image: url("");
  }
  .ray {
    position: absolute;
    bottom: -26px;
    z-index: -1;
    width: 100%;
    height: 56px;
    background-image: url("../images/ray.webp");
    background-position: 100px;
  }
}

.leftChart,
.rightChart {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.centerChart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  width: 50%;
  .map {
    height: 75%;
  }
  .vehicleCharging {
    height: 25%;
  }
}
